<template>
	<view class="treasong">
		<view class="up">
			<span><van-icon name="replay" color='black'/></span>
			<span><strong>为你精选的宝藏歌曲</strong></span>
			<van-button icon="play">播放</van-button>
			<cover-image src="./images/ellipsis-v.png" class="othimg"></cover-image>
		</view>
		
		<view class="songlist">
			<view class="songlis" v-for="lists in treasong" :key="lists">
				<van-image
				  width="56"
				  height="56"
				  radius=25px
				  :src="lists.coverImgUrl"
				  class="headimg"
				/>
				<view class="listmid">
					<p>{{lists.creator.nickname}}</p>
					<p>
						<span></span>
						<span>{{lists.name}}</span>
					</p>
				</view>
				<van-icon name="play-circle-o" size='30px'/>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reqTreaSong } from '../../../api/index.js'
	import { onMounted, ref } from 'vue'
	let treasong = ref([])
	onMounted(async()=>{
		let result = await reqTreaSong()
		treasong.value = result.data.playlists
		console.log(treasong.value);
	})
</script>

<style lang="scss" scoped>
	.treasong{
		width: 720px;
		height: 400px;
		margin: 20px auto;
		.up{
			position: relative;
			>span{
				padding-right: 10px;
			}
			.van-button{
				border-radius: 20px;
				height:30px;
				position: absolute;
				top: -6px;
				color:black;
				background: rgb(234,237,242);
			}
			.othimg{
				width: 18px;
				height: 18px;
				position: absolute;
				top: 5px;
				left: 670px;
			}
		}
		.songlist{
			width: 100%;
			.songlis{
				width: 100%;
				// border: 1px solid black;
				display: flex;
				margin-top: 15px;
				.headimg{
					padding: 5px;
				}
				.listmid{
					width: 200px;
					padding:13px 20px;
					>p:nth-child(1){
						font-size: 17px;
					}
					>p:nth-child(2){
						>span:nth-of-type(2){
							color: rgb(176,181,191);
							font-size: 12px;
						}
					}
				}
				.van-icon{
					padding-left: 360px;
					padding-top: 20px;
					color: rgb(184,188,197);
				}
			}
		}
	}
</style>